<template>
	<view class="page">

		<image class="topbg" src="@/static/home/bgtop.png"></image>
		<view class="top" @click="$goBack(2,'/bundle/pages/personalcenter/personalcenter')">
			<view class="name">{{carlist.driverName}}</view>
			<view>{{carlist.companyName}}</view>
		</view>

		<view v-if="!add" class="addcar bg" @click="$goBack(2,'/bundle/pages/addcar/addcar')">
			<view>
				<view class="addcarname">添加车辆</view>
				<view>完善车辆后享受更多服务</view>
			</view>
			<view>
				<u-button customStyle="width:220rpx;height:80rpx;color:#000;font-size:28rpx;" color="#FBCC32"
					shape="circle">添加车辆</u-button>
			</view>
		</view>
		<view class="addcar" v-else style="background-color:#fff;">
			<image style="width: 150rpx;height: 100rpx;" :src="carlist.brandImage"></image>
			<view style="margin-left:20rpx;width: 300rpx;">
				<view class="addcarname">{{carlist.brandName}}</view>
				<view class="addcot">{{carlist.seriesName}}</view>
			</view>
			<image style="width: 200rpx;height: 100rpx;" :src="carlist.seriesImage"></image>
		</view>


		<view class="bg order">
			<view class="order-name">订单管理</view>
			<view class="list">
				<view class="col" @click="$goBack(2,'/bundle/pages/orders/orders')">
					<image src="../../static/home/o.png"></image>
					<view class="writing">全部订单</view>
				</view>
				<!-- <view class="col" @click="$goBack(2,'/bundle/pages/addcar/addcar')">
					<image src="../../static/20230328061106_d73a2.jpg"></image>
					<view class="writing">车辆档案</view>
				</view> -->
				<!-- 			<view class="col" @click="$goBack(2,'/bundle/pages/convolutioncode/convolutioncode')">
					<image src="../../static/home/code.png"></image>
					<view class="writing">卷码核销</view>
				</view> -->
			</view>
		</view>

		<view class="detail" v-if="carlist.brandName">
			<view class="detail-top">
				<view class="detail-name">车辆概况</view>
			</view>
			<view class="car">
				<view class="line"></view>
				<view>{{carlist.brandName}}</view>
			</view>
			<view class="list">
				<view class="li">
					<view>行驶里程</view>
					<view class="km">{{carlist.mileage}}km</view>
				</view>
				<view class="li">
					<view>下次保养距离</view>
					<view class="km">{{carlist.nextMaintenance | 0}} km</view>
				</view>
				<view class="li">
					<view>年度维修费用</view>
					<view class="km">{{carlist.expenses | 0}} 元</view>
				</view>
			</view>
			<view class="detail-list">
				<view>维修次数：{{carlist.orderCount === ""?0:carlist.orderCount}}次</view>
				<view class="detail-li">
					<view>上牌时间：{{carlist.cardsTime}}</view>
					<view>车牌号：{{carlist.carNumber}}</view>
				</view>
				<view class="detail-li">
					<view>车辆型号：{{carlist.modelsName}}</view>
					<view>运营时长：{{carlist.operationYear}}</view>
				</view>
				<view class="detail-li">
					<view>行驶证编号:{{carlist.drivingLicense}}</view>
					<view>维修次数：{{carlist.orderCount === ""?0:carlist.orderCount}}次</view>
				</view>
			</view>
			<view class="details">交强险到期时间：{{carlist.strongOverTime}}</view>
			<view class="details">商业险到期时间：{{carlist.commerceOverTime}}</view>
			<view class="details">车架号：{{carlist.frameNo}}</view>
	
	</view>
	<u-tabbar :value="value1" :fixed="true" :placeholder="false" :safeAreaInsetBottom="false" activeColor="#F7B530">
		<u-tabbar-item text="首页" @click="homes">
			<image class="u-page__item__slot-icon" slot="active-icon" src="/static/tabber/home.png"></image>
			<image class="u-page__item__slot-icon" slot="inactive-icon" src="/static/tabber/home-t.png"></image>
		</u-tabbar-item>
		<u-tabbar-item v-if="home==2" text="车市场" @click="photo">
			<image class="u-page__item__slot-icon" slot="active-icon" src="/static/tabber/car.png"></image>
			<image class="u-page__item__slot-icon" slot="inactive-icon" src="/static/tabber/car-t.png"></image>
		</u-tabbar-item>
		<u-tabbar-item text="我的" @click="my">
			<image class="u-page__item__slot-icon" slot="active-icon" src="/static/tabber/my.png"></image>
			<image class="u-page__item__slot-icon" slot="inactive-icon" src="/static/tabber/my-t.png"></image>
		</u-tabbar-item>
	</u-tabbar>


	</view>
</template>

<script>
	import {
		apifindCarByUserId
	} from '@/api/car.js'
	export default {
		data() {
			return {
				value1: 2,
				add: false,
				carlist: "",
				form: {
					name: '哈哈哈'
				},
				home: 0,
			}
		},
		created() {
			this.home = uni.getStorageSync("type")
			this.CarByUser()
		},
		methods: {
			CarByUser() {
				let id = uni.getStorageSync('userId') || false
				if (!id) {
					return false
				}
				apifindCarByUserId(id).then((res) => {
					console.log(res)
					if (res.data.id != "") {
						uni.setStorageSync('caruser', res.data)
						this.add = true
						this.carlist = res.data
					}
				})
			},
			homes() {
				uni.redirectTo({
					url: "/pages/home/home"
				})
			},
			my() {
				uni.redirectTo({
					url: "/pages/my/my"
				})
			},
			photo() {
				uni.redirectTo({
					url: "/bundle/pages/carsupermarket/carsupermarket"
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.u-page__item__slot-icon {
		width: 50rpx;
		height: 50rpx;
	}

	.addcot {
		overflow: hidden;
		text-overflow: ellipsis;
		-webkit-line-clamp: 2;
		display: -webkit-box;
		-webkit-box-orient: vertical;
	}

	.page {
		position: relative;

		.topbg {
			z-index: -1;
			position: absolute;
			top: 0;
			width: 100vw;
			height: 424rpx;
		}

		.top {
			padding: 160rpx 40rpx;
			font-size: 28rpx;

			.name {
				font-size: 38rpx;
				font-weight: 600;
				margin-bottom: 6rpx;
			}
		}

		.bg {
			background: linear-gradient(#FFF3CE 0%, #fff 100%);
		}

		.addcar {
			position: absolute;
			width: 718rpx;
			height: 180rpx;

			margin: -80rpx 10rpx 10rpx 17rpx;
			@include flex(row, space-around) font-size: 26rpx;
			padding: 0rpx 20rpx;
			box-sizing: border-box;
			border-radius: 20rpx;

			.addcarname {
				font-size: 28rpx;
				font-weight: 600;
				margin-bottom: 10rpx;
			}
		}
	}

	.order {
		box-shadow: 0px 4rpx 8rpx 0px rgba(225, 225, 225, 0.44);
		margin: 130rpx 10px 10px 17rpx;
		padding: 20rpx 20rpx;
		box-sizing: border-box;
		border-radius: 20rpx;
		height: 280rpx;

		.order-name {
			font-size: 32rpx;
			font-weight: 600;
		}

		.list {
			margin-top: 18rpx;
			display: flex;
			flex-wrap: wrap;

			.col {
				margin: 18rpx 30rpx 0rpx 20rpx;
				margin-top: 18rpx;
				width: 120rpx;
				text-align: center;

				image {
					width: 88rpx;
					height: 88rpx;

				}

				.writing {
					margin-top: 10rpx;
					font-size: 28rpx;

				}
			}
		}
	}

	.detail {
		background-color: #fff;
		box-shadow: 0px 4rpx 8rpx 0px rgba(225, 225, 225, 0.44);
		margin: 30rpx 10px 80px 17rpx;
		padding: 30rpx 20rpx;
		box-sizing: border-box;
		border-radius: 20rpx;
		// height: 600rpx;

		.detail-top {}

		.detail-name {
			font-size: 32rpx;
			font-weight: 600;
		}

		.detail-more {
			display: flex;
			color: $theme-color;
			font-size: 28rpx;
			display: flex;
		}

		.car {
			margin: 10rpx;
			display: flex;
			font-size: 28rpx;

			.line {
				width: 6rpx;
				height: 32rpx;
				background-color: $theme-color;
				margin-right: 10rpx;
			}
		}

		.list {
			@include flex(row, space-between, center) .li {
				width: 216rpx;
				height: 120rpx;
				background-color: #F8FAFB;
				font-size: 24rpx;
				color: #333333;
				padding: 30rpx 20rpx;
				box-sizing: border-box;
				margin-bottom: 10rpx;

				.km {
					font-size: 32rpx;
					font-weight: 600;
				}
			}
		}

		.detail-list {
			margin-top: 10rpx;
			font-size: 24rpx;
			line-height: 50rpx;

			.detail-li {
				color: #333333;
				display: flex;

				view {
					margin-right: 60rpx;
					width: 300rpx;
				}
			}

		}
	}
	.details{
		color: #333333;
		font-size: 24rpx;
		line-height: 50rpx;
	}
</style>